<!-- @format -->

<template>
  <comp-layout>
    <!-- 头部用户信息区域 -->
    <div class="user-header">
      <div class="user-info">
        <!-- 用户头像 -->
        <div class="user-avatar">
          <comp-image
            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=300&auto=format&fit=crop"
            mode="aspectFill"
            class="avatar-image"
          />
        </div>

        <!-- 用户信息 -->
        <div class="user-details">
          <div class="user-name">世界开始颠倒</div>
          <div class="user-badge">
            <span class="badge-icon">🛡️</span>
            <span class="badge-text">已认证会员</span>
          </div>
        </div>

        <!-- 设置按钮 -->
        <div class="settings-btn" @click="goToSettings">
          <span class="settings-icon">⚙️</span>
        </div>
      </div>
    </div>

    <!-- 个人数据统计 -->
    <div class="stats-card">
      <div class="stats-content">
        <div class="stat-item">
          <div class="stat-value">32h</div>
          <div class="stat-label">上课时长</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">15</div>
          <div class="stat-label">预约次数</div>
        </div>
      </div>
    </div>

    <!-- 功能模块 -->
    <div class="content-section">
      <!-- 核销码入口 -->
      <div class="feature-card" @click="goToVerificationCode">
        <div class="feature-icon qr-icon">
          <span>📱</span>
        </div>
        <div class="feature-content">
          <div class="feature-title">我的核销码</div>
          <div class="feature-desc">向教练/空间出示核销码完成签到</div>
        </div>
        <div class="feature-arrow">›</div>
      </div>

      <!-- 我的订单 -->
      <div class="order-section">
        <div class="section-header">
          <div class="section-title">我的订单</div>
          <div class="section-more" @click="() => goToOrders()">
            <span>查看全部</span>
            <span class="more-arrow">›</span>
          </div>
        </div>
        <div class="order-grid">
          <div class="order-item" @click="() => goToOrders('unpaid')">
            <div class="order-icon">
              <span>💰</span>
            </div>
            <div class="order-label">待付款</div>
          </div>
          <div class="order-item" @click="() => goToOrders('pending')">
            <div class="order-icon">
              <span>⏳</span>
            </div>
            <div class="order-label">待服务</div>
          </div>
          <div class="order-item" @click="() => goToOrders('reviewing')">
            <div class="order-icon">
              <span>⭐</span>
            </div>
            <div class="order-label">待评价</div>
          </div>
          <div class="order-item" @click="() => goToOrders('completed')">
            <div class="order-icon">
              <span>✅</span>
            </div>
            <div class="order-label">已完成</div>
          </div>
        </div>
      </div>

      <!-- 常用功能 -->
      <div class="function-section">
        <div class="section-header">
          <div class="section-title">常用功能</div>
          <div class="section-more">
            <span>查看全部</span>
            <span class="more-arrow">›</span>
          </div>
        </div>
        <div class="function-grid">
          <div
            class="function-item"
            @click="onGoPage('/subpackages/my/pages/collect/Index')"
          >
            <div class="function-icon">
              <span>❤️</span>
            </div>
            <div class="function-label">我的收藏</div>
          </div>
          <div class="function-item" @click="goToFeedback">
            <div class="function-icon">
              <span>💬</span>
            </div>
            <div class="function-label">意见反馈</div>
          </div>
          <div class="function-item" @click="goToAbout">
            <div class="function-icon">
              <span>ℹ️</span>
            </div>
            <div class="function-label">关于我们</div>
          </div>
          <div
            class="function-item"
            @click="onGoPage('/subpackages/my/pages/chat/Index')"
          >
            <div class="function-icon">
              <span>🎧</span>
            </div>
            <div class="function-label">客服中心</div>
          </div>
          <div class="function-item" @click="goToInvite">
            <div class="function-icon">
              <span>🔗</span>
            </div>
            <div class="function-label">邀请好友</div>
          </div>
          <div class="function-item" @click="goToMessages">
            <div class="function-icon">
              <span>🔔</span>
            </div>
            <div class="function-label">我的消息</div>
          </div>
        </div>
      </div>

      <!-- 教练申请 -->
      <div class="apply-card coach-apply">
        <div class="apply-content">
          <div class="apply-info">
            <div class="apply-title">成为专业教练</div>
            <div class="apply-desc">分享您的专业技能，获取更多收入</div>
          </div>
          <div class="apply-btn" @click="applyCoach">立即申请</div>
        </div>
      </div>

      <!-- 场地入驻 -->
      <div class="apply-card venue-apply">
        <div class="apply-content">
          <div class="apply-info">
            <div class="apply-title">空间入驻合作</div>
            <div class="apply-desc">让您的空间获得更多曝光和预约</div>
          </div>
          <div class="apply-btn" @click="applyVenue">立即申请</div>
        </div>
      </div>
    </div>
  </comp-layout>
</template>

<script setup lang="ts">
  import compLayout from '@/components/comp-layout/comp-layout.vue';
  import { ref } from 'vue';

  // 页面方法
  const goToSettings = () => {
    uni.showToast({
      title: '设置功能开发中',
      icon: 'none',
    });
  };

  const goToVerificationCode = () => {
    uni.showToast({
      title: '核销码功能开发中',
      icon: 'none',
    });
  };

  const goToOrders = (tab?: string) => {
    uni.showToast({
      title: '订单功能开发中',
      icon: 'none',
    });
  };

  const onGoPage = (path: string) => {
    uni.navigateTo({
      url: path,
    });
  };

  const goToFeedback = () => {
    uni.showToast({
      title: '反馈功能开发中',
      icon: 'none',
    });
  };

  const goToAbout = () => {
    uni.showToast({
      title: '关于我们功能开发中',
      icon: 'none',
    });
  };

  const goToInvite = () => {
    uni.showToast({
      title: '邀请功能开发中',
      icon: 'none',
    });
  };

  const goToMessages = () => {
    uni.showToast({
      title: '消息功能开发中',
      icon: 'none',
    });
  };

  const applyCoach = () => {
    uni.showToast({
      title: '教练申请功能开发中',
      icon: 'none',
    });
  };

  const applyVenue = () => {
    uni.showToast({
      title: '场地申请功能开发中',
      icon: 'none',
    });
  };
</script>

<style lang="scss" scoped>
  .user-header {
    background: linear-gradient(135deg, $main 0%, $main2 100%);
    padding: 108rpx 32rpx 96rpx;
    position: relative;
  }

  .user-info {
    display: flex;
    align-items: center;
    position: relative;
  }

  .user-avatar {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    border: 4rpx solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
  }

  .avatar-image {
    width: 100%;
    height: 100%;
  }

  .user-details {
    margin-left: 32rpx;
    flex: 1;
  }

  .user-name {
    font-size: 40rpx;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 16rpx;
  }

  .user-badge {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    padding: 8rpx 16rpx;
    border-radius: 32rpx;
    width: fit-content;
  }

  .badge-icon {
    font-size: 24rpx;
    margin-right: 8rpx;
  }

  .badge-text {
    font-size: 24rpx;
    color: #ffffff;
  }

  .settings-btn {
    position: absolute;
    top: -20rpx;
    right: 0;
    width: 64rpx;
    height: 64rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .settings-icon {
    font-size: 32rpx;
    color: #ffffff;
  }

  .stats-card {
    background: #ffffff;
    margin: -48rpx 32rpx 0;
    border-radius: 24rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 117, 247, 0.1);
    position: relative;
    z-index: 10;
  }

  .stats-content {
    padding: 32rpx;
    display: flex;
    justify-content: space-around;
  }

  .stat-item {
    text-align: center;
  }

  .stat-value {
    font-size: 36rpx;
    font-weight: 600;
    color: $main;
    margin-bottom: 8rpx;
  }

  .stat-label {
    font-size: 24rpx;
    color: #999999;
  }

  .content-section {
    padding: 32rpx;
  }

  .feature-card {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 32rpx;
    margin-bottom: 32rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  }

  .feature-icon {
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 32rpx;
  }

  .qr-icon {
    background: linear-gradient(135deg, $main 0%, $main2 100%);

    span {
      font-size: 48rpx;
    }
  }

  .feature-content {
    flex: 1;
  }

  .feature-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 8rpx;
  }

  .feature-desc {
    font-size: 24rpx;
    color: #999999;
  }

  .feature-arrow {
    font-size: 32rpx;
    color: #cccccc;
  }

  .order-section,
  .function-section {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 32rpx;
    margin-bottom: 32rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid $bg;
  }

  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
  }

  .section-more {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #999999;
  }

  .more-arrow {
    margin-left: 8rpx;
    font-size: 20rpx;
  }

  .order-grid,
  .function-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32rpx;
  }

  .order-item,
  .function-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .order-icon,
  .function-icon {
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    background: $bg2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16rpx;

    span {
      font-size: 36rpx;
    }
  }

  .order-label,
  .function-label {
    font-size: 24rpx;
    color: #333333;
  }

  .apply-card {
    background: linear-gradient(135deg, $bg2 0%, rgba(196, 231, 255, 0.5) 100%);
    border-radius: 24rpx;
    margin-bottom: 32rpx;
    overflow: hidden;
  }

  .apply-content {
    padding: 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .apply-info {
    flex: 1;
  }

  .apply-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 8rpx;
  }

  .apply-desc {
    font-size: 24rpx;
    color: #666666;
  }

  .apply-btn {
    background: linear-gradient(135deg, $main 0%, $main2 100%);
    color: #ffffff;
    padding: 16rpx 32rpx;
    border-radius: 32rpx;
    font-size: 24rpx;
    font-weight: 500;
  }

  /* H5 适配 */
  @media screen and (min-width: 768px) {
    .content-section {
      max-width: 768rpx;
      margin: 0 auto;
    }

    .order-grid,
    .function-grid {
      grid-template-columns: repeat(6, 1fr);
    }
  }
</style>
